<template>
  <Layout :class="'bg-white p-2'">
    <Row :class="'m-1'">
      <Col span="4">
        <Button
          class="m-2"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table border :class="'m-1'" :columns="columnInfo" :data="proList">
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button
                  type="primary"
                  @click="repayment(row)"
                  :disabled="row.status == '还款已确认'"
                  >手动还款</Button
                >
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      searchProName: '',
      searchProLead: '',
      searchProAddr: '',
      columnInfo: [
        {
          width: 80,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '期数',
          key: 'number',
          width: 80,
        },
        {
          title: '应付',
          key: 'payable',
          width: 150,
        },
        {
          title: '服务费',
          key: 'service',
          width: 150,
        },
        {
          title: '应收',
          key: 'receivables',
          width: 150,
        },
        {
          title: '还款状态',
          key: 'status',
          width: 150,
        },
        {
          title: '还款日',
          key: 'payDate',
          width: 150,
        },
        {
          title: '计划还款日',
          key: 'planPayDate',
          width: 150,
        },
        {
          title: '支付方式',
          key: 'payMethod',
          width: 150,
        },
        {
          title: '审核人',
          key: 'confirmUserName',
          width: 350,
        },
        {
          title: '流水号',
          key: 'businessTNumber',
          width: 350,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          fixed: 'right',
        },
      ],
      methodList: [
        {
          value: '现金支付',
          label: '现金支付',
        },
        {
          value: '刷卡支付',
          label: '刷卡支付',
        },
      ],
      proList: [],
      payMethod: {},
    }
  },
  methods: {
    search: function() {
      this.http
        .get({
          url: `/paymentItem/list/${this.$route.params.row.paymentId}`,
        })
        .then((data) => {
          this.$data.proList = data
        })
    },
    repayment: function(row) {
      this.$Modal.confirm({
        title: '手动还款方式',
        content: '<p>Content of dialog</p><p>Content of dialog</p>',
        render: (h, params) => {
          return h(
            'Select',
            {
              props: {
                value: this.value,
                size: 'small',
              },
              on: {
                'on-change': (val) => {
                  this.payMethod = val
                },
              },
            },
            this.methodList.map(function(item) {
              return h('Option', {
                props: {
                  value: item.value,
                  label: item.label,
                },
              })
            })
          )
        },
        onOk: () => {
          console.log(row)
          this.http
            .put({
              url: '/paymentItem/repayment',
              param: {
                id: row.id,
                payMethod: this.payMethod,
              },
            })
            .then((data) => {
              this.search()
              this.message.info('支付成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  watch: {
    $route(row) {
      this.search(row)
    },
  },
  created: function() {
    this.search()
  },
}
function parseDataObj(data) {
  var ProArray = []

  data.forEach((list) => {
    let poko = {
      proId: list.id,
      datetime: list.datetime,
      leadTel: list.leadTel,
      proAddr: list.proAddr,
      proInfo: list.proInfo,
      proLead: list.proLead,
      proName: list.proName,
      statu: list.statu,
      paymentItemId: list.id,
      di: list.id,
      payMethod: list.payMethod,
    }
    ProArray.push(poko)
  })
  return ProArray
}
</script>

<style></style>
